<template>
  <div class="console">
    <div class="container-content">
      <div class="container-menu" :style="{width:collapsed ? '80px' : '245px'}">
        <div class="logo" :style="{height:collapsed ? '80px' : '165px'}">
          <img v-if="!collapsed" src="../assets/images/data-logo.png" alt />
          <img v-else src="../assets/images/logo-mini.png" alt style="width:45px" />
          <p v-if="!collapsed">用户运营管理系统</p>
        </div>
        <div class="menu-bg" v-if="!collapsed">
          <img src="../assets/images/nav-bg.png" alt />
        </div>
        <a-menu
          class="menu"
          :selectedKeys="[$route.path]"
          :inline-collapsed="collapsed"
          mode="inline"
          theme="dark"
        >
          <template v-for="v in menuData">
            <a-menu-item v-if="!v.children" :key="v.name" @click="jumpRouter(v)">
              <i :class="['iconfont',v.icon,'mymenu-icon']" v-if="!!v.icon&&v.icon.length>0"></i>
              <span>{{ v.text }}</span>
            </a-menu-item>
            <a-sub-menu v-else :key="v.name">
              <span slot="title">
                <i :class="['iconfont',v.icon,'mymenu-icon']" v-if="!!v.icon&&v.icon.length>0"></i>
                <span>{{ v.text }}</span>
              </span>
              <a-menu-item v-for="vv in v.children" :key="vv.name" @click="jumpRouter(vv)">
                <i :class="['iconfont',vv.icon,'mymenu-icon']" v-if="!!vv.icon&&vv.icon.length>0"></i>
                <span>{{ vv.text }}</span>
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </div>
      <div class="content-body">
        <div class="console-head">
          <a-icon
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            class="toggle-icon"
            @click="toggleCollapsed"
          />
          <div class="user-info">
            <a-dropdown :trigger="['click','hover']" v-model="dropdownVisible">
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                {{cname}}
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleMenuClick" class="sys-opts">
                <a-menu-item @click="logout" key="2">退出</a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <a-badge :count="pagination1.total" class="msg-num"></a-badge>
          <div class="user-ico">
            <img src="../assets/images/head-img.png" alt />
          </div>
        </div>

        <div class="con">
          <div class="main-box">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { outlogin } from "api/login";
import meun from "@/router/meun";
import { mapGetters } from "vuex";
import { paging } from "assets/js/mixin";
export default {
  mixins: [paging],
  data() {
    return {
      cname: JSON.parse(localStorage.getItem("userInfo")).cname,
      collapsed: false,
      morelist: [], //更多一级导航
      navlist: [], //一级导航
      curNav: ["菜单1"], //一级导航默认选中值：curNav: ['test1']
      openKeys: [""],
      pageNum1: 1,
      pageSize1: 5,
      current1: 1,
      pagination1: {
        //表格分页相关配置
        current: 1,
        total: 0,
        defaultPageSize: 5,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20"]
      },
      menuData: [],
      dropdownVisible: false, //下拉菜单展示隐藏
      unitList: [], //当前用户所属部门
      currentUnit: "", //当前id
      defaultUnitId: "", //已设置的默认部门
      informData: {}
    };
  },
  mounted() {
    this.menuData = meun();
    if (this.$route.path === "/console/" || this.$route.path === "/console") {
      this.$router.push(
        this.menuData[0].name,
        () => {},
        e => {
          console.log("输出报错", e);
        }
      );
    }
  },
  methods: {
    //下拉菜单默认 点击关闭 接触该功能
    handleMenuClick(e) {
      if (e.key === "3") {
        this.visible = false;
      }
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    handleName(name) {
      this[name]();
    },
    logout() {
      outlogin()
        .then(res => {
          //登出
          localStorage.removeItem("TOKEN");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("permission");
          this.$router.push("/login");
          this.$message.destroy();
          this.$message.success(res.msg);
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    // 相同路由禁止跳转，后续如果需要刷新可以改变?参数
    jumpRouter(user) {
      const { path } = this.$route;
      const { name } = user;
      if (name === path) {
        return;
      }
      this.$router.push(name);
    }
  },
  computed: {
    openNames() {
      const path =
        this.$route && this.$route.path && this.$route.path.split("/")[2];
      return path || "";
    },
    ...mapGetters(["userInfo"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~stylus/mixin.styl';
@import '~stylus/base.styl';

.ant-menu-submenu-title {
  font-size: 16px !important;

  .anticon {
    font-size: 16px !important;
  }
}

.over-defined {
  .ant-dropdown-menu-item {
    font-size: 16px;

    i {
      font-size: 16px !important;
    }

    &:hover {
      background-color: transparent;
      color: #1890ff;
    }
  }
}

.sys-opts {
  width: 150px;

  .ant-dropdown-menu-item {
    padding: 5px 16px;

    .ant-collapse-item {
      background: #fff;
      border: none;
      overflow: hidden;
    }

    .ant-collapse-header {
      padding: 5px 35px 5px 16px;
      color: rgba(0, 0, 0, 0.65);

      &:hover {
        background-color: #e6f7ff;
      }
    }

    .ant-collapse-content {
      .ant-collapse-content-box {
        padding: 0;

        .ant-radio-group {
          width: 100%;

          .unit-switch {
            padding-left: 25px;
            height: 32px;

            &:hover {
              background-color: #e6f7ff;
            }

            .unit-name {
              float: left;
              display: inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: calc(100% - 42px);
              line-height: 32px;
            }

            .ant-radio-wrapper {
              float: right;
              line-height: 32px;
              margin: 0 16px 0 10px;
            }
          }

          .current-switch {
            background-color: #e6f7ff;
          }
        }
      }
    }
  }
}

.mymenu-icon {
  font-size: 16px;
  margin-right: 10px;
}

.user-ico {
  font-size: 0;
  width: 30px;
  height: 30px;
  margin-right:5px;
  margin-top: 12px;
  position: absolute;
  right: 100px;

  img {
    width: 100%;
    height: 100%;
    border-radius:100%;
  }
}

.console {
  .ant-menu-inline-collapsed {
    .ant-menu-item {
      .mymenu-icon + span {
        display: inline-block;
        max-width: 0;
        opacity: 0;
      }
    }

    .ant-menu-submenu-title {
      .mymenu-icon + span {
        display: inline-block;
        max-width: 0;
        opacity: 0;
      }
    }
  }

  .console-head {
    position: relative;
    model(100%, 60px, none, 0 20px 0 0, -1, -1);
    background-color: #fff;
    shadow(0 1px 4px rgba(0, 21, 41, 0.08));

    .toggle-icon {
      font-size: 22px;
      float: left;
      margin: 19px 0 0 20px;

      &:hover {
        color: #1890ff;
      }
    }

    .nav-list {
      display: inline-block;
      model(calc(100% - 250px), 100%, 0 15px, none, -1, 0);

      .nav-icon {
        font-size: 16px;
        margin-right: 10px;
      }

      .ant-menu-horizontal {
        float: left;
        display: inline-block;
        height: 60px;
        line-height: 59px;
        border-bottom: 1px solid #fff;
        background: #fff;
        color: #666;
        font-size: 16px;

        .ant-menu-item {
          margin-top: -2px;

          i {
            font-size: 16px;
          }
        }
      }

      .nav-more {
        display: inline-block;
        width: 20px;
        text-align: center;
        line-height: 60px;
      }

      p {
        color: #fff;
        margin-bottom: 0;
      }
    }

    .msg-bell {
      float: right;
      font-size: 22px;
      margin: 19px 0;
      color: #666;
      cursor: pointer;

      &:hover {
        color: #1890ff;
      }
    }

    .msg-num {
      float: right;
      margin: 10px 15px 0 -2px;
    }

    .user-info {
      float: right;
      font-size: 16px;
      line-height: 60px;

      p {
        cursor: pointer;
      }
    }
  }

  .container-menu {
    model(245px, 100%, none, none, 1, none);
    background: #262935;
    position: relative;
    transition: width 0.1s;
    -moz-transition: width 0.1s; /* Firefox 4 */
    -webkit-transition: width 0.1s; /* Safari 和 Chrome */
    -o-transition: width 0.1s; /* Opera */

    .menu {
      background #000e29
      overflow: auto;
      height: 100%;
    }
    .menu-bg { 
      width: 100%;
      position:absolute;
      bottom:0;
      left:0px;
      img {
        width:100%;
        height :auto;
      }
    }
    .logo {
      width: 100%;
      height: 165px;
      text-align: center;
      background-color: #000e29;

      img {
        display: inline-block;
        width: 166px;
        height: auto;
        margin: 25px auto 25px;
        vertical-align: middle;
      }

      p {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        /* letter-spacing: 6px; */
        text-shadow: 0 2px 9px #9cadbd;
      }
    }
  }

  .container-content {
    pos(0, 0, 0, 0, 0, 0);
  }

  .content-body {
    model(none, 100%, none, none, -1, 0);

    .con {
      background: #f1f2f6;
      model(100%, calc(100% - 60px), none, 20px, -1, 0);
      overflow-x: auto;

      .main-box {
        background: #fff;
        display: inline-block;
        min-width: 1000px;
        model(100%, 100%, none, none, -1, 3);
        border: 1px solid #e8e8e8;

        .ant-card-bordered {
          border: none;
        }
      }
    }
  }
}
</style>
